<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background: #000;
            overflow: hidden;
        }
        #c1{
            background: #000;
        }
    </style>
    <script>

    </script>
</head>
<body>
    <canvas id="c1" width="800" height="600">
        <span></span>
    </canvas>
</body>
</html>
<script>
    function random(n,m) {
        return Math.floor(Math.random()*(m-n)+n);
    }

    var oC=document.getElementById('c1');
    var gd=oC.getContext('2d');

    //定义画布的大小
    var winW=document.documentElement.clientWidth;
    var winH=document.documentElement.clientHeight;

    oC.width=winW;
    oC.height=winH;
    //设置点
    var N=5;
    //设置阴影的条数
    var YIN=10;
    //存阴影
    var oldArr=[];//[[],[],[],[],[]]
    //存点
    var aPoint=[]; //[{x,y,speedX,speedY}，{}，{}]
    //生成点
    for(var i=0;i<N;i++){
        aPoint[i]={
            x:random(0,winW),
            y:random(0,winH),
            iSpeedX:random(-10,10),
            iSpeedY:random(-10,10)
        }
    }
    //画点的函数
    function drawPoint(p) {
        var pW=10;
        var pH=10;
        gd.fillStyle='#fff';
        gd.fillRect(p.x,p.y,pW,pH);
    }
    //让点动起来
    setInterval(function () {
        gd.clearRect(0,0,winW,winH);

        for(var i=0;i<aPoint.length;i++){
            //改变x，y的坐标，让点动起来
            aPoint[i].x+=aPoint[i].iSpeedX;
            aPoint[i].y+=aPoint[i].iSpeedY;

            if(aPoint[i].y>=winH){
                aPoint[i].iSpeedY*=-1;
            }

            if(aPoint[i].x>=winW){
                aPoint[i].iSpeedX*=-1;
            }

            if(aPoint[i].y<=0){
                aPoint[i].iSpeedY*=-1;
            }

            if(aPoint[i].x<=0){
                aPoint[i].iSpeedX*=-1;
            }
            //画点
            drawPoint(aPoint[i]);
        }

        //连成线
        gd.beginPath();
        gd.strokeStyle='#fff';

        gd.moveTo(aPoint[0].x,aPoint[0].y);

        for(var i=1;i<aPoint.length;i++){
            gd.lineTo(aPoint[i].x,aPoint[i].y);
        }
        gd.closePath();
        gd.stroke();

        //存阴影
        var arr=[];
        for(var i=0;i<aPoint.length;i++){
            arr[i]={
                x:aPoint[i].x,
                y:aPoint[i].y
            }
        }

        oldArr.push(arr);
        //阴影不能一直存，存够条数把最开始的删了
        if(oldArr.length>YIN){
            oldArr.shift();
        }


        //画阴影
        //循环有多少条阴影
        for(var i=0;i<oldArr.length;i++){
            gd.beginPath();
            var opacity=i/oldArr.length;
            gd.strokeStyle='rgba(255,255,255,'+opacity+')';

            gd.moveTo(oldArr[i][0].x,oldArr[i][0].y);
            //连线画点
            for(var j=0;j<oldArr[i].length;j++){
                gd.lineTo(oldArr[i][j].x,oldArr[i][j].y);
            }
            gd.closePath();
            gd.stroke();
        };

    },16);


</script>































